<template>
    <el-table
        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        style="width: 100%;min-height: 500px;"
        @selection-change="handleSelectionChange"
        :current-page.sync="currentPage"
        v-loading="loading"
        @row-click="selectRow"
        ref="iCloudTable"
    >   
        <el-table-column type="selection" width="55" />
        <el-table-column label="文件名" width="400" show-overflow-tooltip>
            <template #default="scope">
                <el-space>
                    <el-icon>
                        <component :is="scope.row.type"/>
                        <component is="folder"  v-if="!scope.row.type"/>
                    </el-icon>
                    {{ scope.row.name }}
                </el-space>
            </template>
        </el-table-column>
        <el-table-column property="edate" label="修改时间" width="300" />
        <el-table-column property="fileSize" label="大小"  />
        <template #empty>
            <el-empty description="当前目录下暂无文件" />
        </template>

    </el-table>
    <el-pagination
        background 
        layout=" -> ,prev, pager, next" 
        :total="total"
        :page-size="pagesize"
        @current-change="handleCurrentChange" 
        />
</template>

<script setup>
import { ref, onMounted , defineEmits} from 'vue'
import { ElTable } from 'element-plus'
import { initList } from '@/request/api.js';
import { ElNotification } from 'element-plus'

const iCloudTable = ref()
const emit = defineEmits(['refresh'])

//已选中集合
const multipleSelection = ref([])
//加载动画
const loading = ref(true)
const tableData = ref([])
const pagesize = ref(10)
//当前页数
const currentPage = ref(1)
//总页数
const total = ref(0)



//生命周期 初始化列表
onMounted(()=>{
    upList()
})

//更新当前目录
const upList = () => {
    initList("/").then(res=>{
        if(res.code === 200){
            if(res.data == null){
                ElNotification({
                    title:"当前目录无文件",
                    message:"上传一些文件吧",
                    type:"info"
                })
            }else{
                loading.value = false
                tableData.value = [...res.data.folder,...res.data.file]
                total.value = tableData.value.length
            }
        }
        
    })
    .catch(err=>{
        ElNotification({
            title:"连接错误",
            message:"检查网络或联系管理员",
            type:"error"
        })
    })
}

//更改当前页面
const handleCurrentChange = (val) =>{
    currentPage.value = val
}

//把选中内容赋予
const handleSelectionChange = (val) => {
    multipleSelection.value = val
    emit('refresh',multipleSelection.value.length)
}

//点击 选中整行
const selectRow = (row, column, event) =>{
    iCloudTable.value.toggleRowSelection(row,undefined)
}



defineExpose({upList,multipleSelection})
</script>

<style scoped>

</style>